<template>
  <Layout>
    <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0">
            真实服务器详情
            <span class="pointer delServer">删除服务器</span>
          </h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4" v-for="(data, index) in statData" :key="index">
        <div class="card">
          <div class="card-body">
            <div class="media">
              <div class="media-body text-center overflow-hidden">
                <p class="text-truncate font-size-14 mb-2">{{ data.title }}</p>
                <h4 class="mb-0">{{ data.value }}</h4>
                <!-- <div style="display:inline-block;">{{data.desc}}</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card" style="padding-top: 20px;">
      <div class="row col-md-12">
        <div class="col-md-4">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-3 padding-right col-form-label"
              >运行环境</label
            >
            <div class="col-md-9">
              测试环境
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-3 padding-right col-form-label"
              >IP地址</label
            >
            <div class="col-md-9">
              192.168.71.63
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-3 padding-right col-form-label"
              >虚拟服务器</label
            >
            <div class="col-md-9">
              2台
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="row col-md-12">
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >启动时长</label
            >
            <div class="col-md-8">
              213天20小时40分钟20秒
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >系统进程数</label
            >
            <div class="col-md-8">
              200
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >文件句柄数</label
            >
            <div class="col-md-8">
              100
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >网络连接数</label
            >
            <div class="col-md-8">
              20000
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12">
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >加入时间</label
            >
            <div class="col-md-8">
              2021-08-13
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              查看系统密码
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              进入Linux控制台
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              立刻检测状态
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <b-table
                class="table-centered"
                :items="ordersData"
                :fields="fields"
                responsive="sm"
                :per-page="perPage"
                :current-page="1"
                thead-class="thead-light"
                @filtered="onFiltered"
              >
                <template v-slot:cell(name)="row">
                  <div @click="jump" class="pointer">{{ row.value}}</div>
                </template>
                <template v-slot:cell(activeState)="row">
                  <div v-if="row.value=='正常'" class="badge font-size-12 badge-soft-success">{{ row.value}}</div>
                  <div v-if="row.value=='异常'" class="badge font-size-12 badge-soft-danger">{{ row.value}}</div>
                </template>
              </b-table>
            </div>
            <div class="row">
              <div class="col">
                <div class="dataTables_paginate paging_simple_numbers float-right">
                  <ul class="pagination pagination-rounded mb-0">
                    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
export default {
  components: {
    Layout,
  },
  data () {
    return {
      statData: [
        {
          title: "CPU",
          icon: "ri-stack-line",
          value: "48核",
        },
        {
          title: "内存",
          icon: "ri-store-2-line",
          value: "512G",
        },
        {
          title: "磁盘",
          icon: "ri-briefcase-4-line",
          value: "4TB",
        },
      ],
      ordersData: [
        {
          name: "Server1",
          IPaddress: "192.168.71.31",
          configure: "32Core/64GB/500GB",
          appServer: "6",
          cpu: "80%",
          memory: "70%",
          disk: "55%",
          activeState: "正常",
          detectionTime: "2021-09-18",
        },
        {
          name: "Server2",
          IPaddress: "192.168.71.32",
          configure: "32Core/64GB/500GB",
          appServer: "8",
          cpu: "80%",
          memory: "70%",
          disk: "55%",
          activeState: "异常",
          detectionTime: "2021-09-18",
        },
      ],
      totalRows: 1,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      filter: null,
      fields: [
        { key: "name", label: "虚拟服务器" },
        { key: "IPaddress", label: "IP地址" },
        { key: "configure", label: "机器配置" },
        { key: "appServer", label: "应用服务器" },
        { key: "cpu", label: "CPU使用" },
        { key: "memory", label: "内存使用" },
        { key: "disk", label: "磁盘使用" },
        { key: "activeState", label: "活动状态" },
        { key: "detectionTime", label: "最后检测时间" },
      ],
    }
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    onFiltered(filteredItems) {
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    jump(){
      this.$router.push('/computing/fictitiousDetail')
    },
  }
}
</script>
<style lang="scss" scoped>
.delServer{
  font-weight: normal;
  font-size: 0.7rem;
  margin-left: 10px;
  color: #74788d;
  float: right;
}
.allNum{
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.searchNum{
  span{
    font-size: 1rem;
    color: #3444c1;
    margin: 0 4px;
    font-weight: 600;
  }
  p{
    display: inline-block;
    color: #999999;
    margin-left: 4px;
    margin-bottom: 0px;
  }
}
</style>
